<template> <!--  -->
    <div class="shop-box all-list-box">  
      <!-- <div class="filter-top" @click="showFilter = true"> 
        请选择筛选条件 <div class="isclick"></div> 
      </div> -->
      <div v-for="(item,index) in shopList" :key="index" class="shop-item" > 
        <div class="adrees" @click="chooseThis(index)">
          <div class="shop-item-left"  >
              <div class="check-box" v-if="sourceStoreId != item.storeId">
                  <div class="check-circle" v-if="item.isChecked"></div>
              </div>
          </div>
          <div class="shop-item-right">
              <div class="shop-name">{{item.storeName}} </div>
              <div class="shop-adreess">{{item.province}}{{item.city}}{{item.district}}{{item.adreess}}</div>
          </div>
        </div>
      </div>
      <nodata v-if="!shopList || shopList.length==0" />
      <div class="height120"></div>
      <div class="addbtn isbtn" @click="submit()">选好了</div>
    </div>
  </template>
  
  <script>
  import api from '@/api/api.js' 
  import { Message } from 'element-ui' 
  import { Group,Search } from 'vux'
  import nodata from '@/components/nodata'
  export default { 
    components: {
      Search,
      Group, 
      nodata
    },
    data () {
      return {
        shopFilter:{
          pageNum:1,
          pageSize:20,
          name:'',
          city:'',
          totalPage:0,
        }, 
        totalPage:'',
        shopList:[ ],
        sourceStoreId:'',
        multiplay:false,
        formType:'',
      }
    },
    created(){
    
    },
    mounted () {
      this.sourceStoreId = this.$route.query.id;
      this.getShopList();

    },
    filters: {
    },
    
    methods: { 
      chooseThis(index1,index2){
        if(this.shopList[index1].storeId == this.sourceStoreId){
          return
        }
        if(this.multiplay){ //多选
          const bool = !this.shopList[index1].isChecked;
          this.$set(this.shopList[index1], "isChecked", bool);
        }else{ //单选
          if(this.shopList[index1].isChecked){
            return
          }
          this.shopList.forEach((item,index)=>{
            if(item.isChecked){
               this.$set(this.shopList[index], "isChecked", false);
            }
          })
          this.$set(this.shopList[index1], "isChecked", true);
        }
        
      },
      submit(){
        let checkShop =  [];
        this.shopList.forEach(item => {
          if(item.isChecked){
            checkShop.push(item);
          } 
        })
        if(checkShop.length==0){
          return  Message({
                  message: "请选择店铺！",
                  type: 'error',
                  duration: 3 * 1000
              }) 
        }
        this.$vux.confirm.show({
            title: '警告',
            content: `确认复制？`, 
            onCancel () { 
            },
            onConfirm: ()=> {
              api.foodMng.operGoodsCopy({
                    "distStoreId":checkShop.storeId,
                    "sourceStoreId": this.sourceStoreId, 
                },res=>{ 
                  return this.$vux.toast.show({
                    text: '复制成功',
                    type:'text',
                    onShow:res=>{
                      this.$router.go(-1);
                    }
                  })
              }) 
            }
          })

        
        // if(this.formType==2){ //采购订单进入
        //   this.$store.commit("setPurchaseOrderDetail",{
        //     tab_idx:1,
        //     detail:checkShop[0]
        //   })
        //   this.$store.commit("setCheckGoods",[]); 
        //   this.$router.go(-1);
        //   return ; 
        // }
        // this.$store.commit("setShopList",checkShop);
        // this.$router.go(-1);
      },
      getShopList(){
        let params={
          pageNum: this.shopFilter.pageNum,
          pageSize: this.shopFilter.pageSize
        }
        this.isLoading = true;
        if(this.formType==2){
          params.queryType = 2;
        }
        api.shopMng.shopList(params,res=>{
          this.isLoading = false;
          this.shopList= this.shopFilter.pageNum == 1 ? res.result.data :this.shopList.concat(res.result.data);
          this.shopFilter.totalPage = res.result.totalPage;
        })
      },
    }
  }
  </script>
  <style lang="less" scoped>
      .height120{
          height: 60px;
      }
      .addbtn{
          text-align: center;
          line-height: 50px;
          background: #FABE00;
          color: #fff;
          height: 50px;
          font-size: 16px;
          letter-spacing: 4px;
          position: fixed;
          width: 100%;
          bottom: 0;
          left: 0;
      }
      .shop-box{
        //   padding-top: 50px;
      }
      .cityName{
          font-size: 16px;
          font-weight: bold;
          height: 30px;
          line-height: 30px;
          padding-left: 16px;
          margin-top: 10px;
      }
      .adrees{ 
          padding-left: 20px;
          position: relative;
          font-size: .24rem;
          line-height: .24rem;
          padding-top: .20rem;
          padding-bottom: .20rem;
          color: #666;
          display: flex;
          &::before{
              content: '';
              position: absolute;
              right: 0;
              left: 20px;
              bottom: 0;
              height: 1px;
              background: #eee;
          }
          .shop-item-left{
              padding: 0 .24rem;
              display: flex;
              justify-content: center;
              align-items: center;
              .check-box{
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  width: .38rem;
                  height: .38rem;
                  border-radius: 50%;
                  border: 1px solid #e1e1e1;
                  .check-circle{
                      width: .18rem;
                      height: .18rem;
                      border-radius: 50%;
                      background: #FABE00;
                  }
              }
          }
      }
      .city-choose-name{
          margin-top: 15px;
      }
      .filter-top{
          height: 44px;
          display: flex;
          justify-content: center;
          align-items: center;
          position: fixed;
          border-bottom: 1px solid #eee;
          top: 0;
          left: 0;
          right: 0;
          background: #fff;
          z-index: 3;
          .isclick{
              border-width: 0 1px 1px 0;
              margin-top: -6px;
          }
      }
      .btn-box{
          display: flex;
          width: 100%;
          margin-top: 20px;
          height: 44px;
          justify-content: space-between; 
      .btn{
          border-radius: 8px;
          height: 44px;
          width: 45%;
          line-height: 44px;
          text-align: center;
          color: #fff;
          &:active{
          opacity: .7;
          }
          &.reset{
          background: #ddd;
          }
          &.confirm{
          background: #FABE00;
          }
      }
  }
  .search-box{
      width: 90%;
  }
  .iconshaixuan{
      color: #999;
      margin-left: 6px;
      font-size: 18px;
  }
  /deep/.weui-search-bar__label{
    top: 3px;
  }
  .filter-content{
    background: #fff;
    width: 100%;
    padding: 20px;
    /deep/.weui-search-bar:before{
      height: 0;
    }
    /deep/.weui-search-bar::after{
      height: 0;
    }
    .row-box{
      margin-bottom: 20px;
    }
    .filter-title{
      padding-top: 20px;
  
    }
    .data-time-box{
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
  /deep/.vux-popup-picker-select{
    text-align: left !important;
  }
  /deep/.weui-search-bar,.vux-search-fixed{
    position: relative !important;
    padding: 0;
    background: #fff;
  }
  /deep/.weui-search-bar__cancel-btn{
    text-decoration: none;
  }
  /deep/.weui-search-bar:after{
    display: none;
  }
  /deep/.weui-search-bar::before{
    display: none;
  }
  .shop-adreess{
      margin-top: 0.20rem;
      color: #999;
  }
  </style>